<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品详情</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/product/search}">返回搜索</a></li>
                <li class="breadcrumb-item active" aria-current="page">商品详情</li>
            </ol>
        </nav>

        <div class="card">
            <div class="card-body">
                <h3 class="card-title" th:text="${product != null ? product.name : '商品不存在'}">商品名称</h3>
                <p class="card-text">价格: ￥<span th:text="${product != null ? product.price : '0.00'}">0.00</span></p>
                <p class="card-text" th:text="${product != null ? product.description : ''}">商品描述</p>
                
                <div th:if="${isLoggedIn}">
                    <button th:if="${!hasLiked}" onclick="like()" class="btn btn-outline-danger me-2">点赞</button>
                    <button th:if="${hasLiked}" onclick="unlike()" class="btn btn-danger me-2">取消点赞</button>
                    <button onclick="addToCart()" class="btn btn-primary">加入购物车</button>
                </div>
                
                <div th:unless="${isLoggedIn}" class="alert alert-warning mt-3">
                    请<a th:href="@{/user/login}">登录</a>后进行点赞和购物车操作
                </div>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
        /*<![CDATA[*/
        const productId = [[${product != null ? product.id : 0}]];
        const price = [[${product != null ? product.price : 0.00}]];
        
        function like() {
            fetch(`/like/${productId}`, {
                method: 'POST'
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  alert('操作失败，请重试');
              });
        }

        function unlike() {
            fetch(`/like/${productId}`, {
                method: 'DELETE'
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  alert('操作失败，请重试');
              });
        }

        function addToCart() {
            fetch('/cart/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `productId=${productId}&price=${price}`
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      alert('添加成功');
                  } else {
                      alert(result);
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  alert('添加失败，请重试');
              });
        }
        /*]]>*/
    </script>
</body>
</html> 